<template>
     <div class="search">
         <div class="sl">
             <slot name="sl-icon"></slot>
             <!-- <svg t="1636616685570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2419" width="200" height="200"><path d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0" fill="#666666" p-id="2420"></path></svg> -->
         </div>
         <div class="sm">
            <svg t="1636541265631" class="icon sear" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" width="200" height="200"><path d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z" p-id="2423"></path></svg>
            <slot name="sm-inp"></slot>
            <!-- <input type="text" placeholder="请输入关键词..."> -->
            <slot name="sm-close"></slot>
            <!-- <svg t="1636617495677" class="icon close" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3753" width="200" height="200"><path d="M512 64c-247.00852 0-448 200.960516-448 448S264.960516 960 512 960c247.00852 0 448-200.960516 448-448S759.039484 64 512 64zM694.752211 649.984034c12.480043 12.54369 12.447359 32.768069-0.063647 45.248112-6.239161 6.208198-14.399785 9.34412-22.591372 9.34412-8.224271 0-16.415858-3.135923-22.65674-9.407768l-137.60043-138.016718-138.047682 136.576912c-6.239161 6.14455-14.368821 9.247789-22.496761 9.247789-8.255235 0-16.479505-3.168606-22.751351-9.504099-12.416396-12.576374-12.320065-32.800753 0.25631-45.248112l137.887703-136.384249-137.376804-137.824056c-12.480043-12.512727-12.447359-32.768069 0.063647-45.248112 12.512727-12.512727 32.735385-12.447359 45.248112 0.063647l137.567746 137.984034 138.047682-136.575192c12.54369-12.447359 32.831716-12.320065 45.248112 0.25631 12.447359 12.576374 12.320065 32.831716-0.25631 45.248112L557.344443 512.127295 694.752211 649.984034z" p-id="3754" fill="#8a8a8a"></path></svg> -->
         </div>
        <div class="sr">
            <slot name="sr-icon"></slot>
           <!-- <svg t="1636593252379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3104" width="200" height="200"><path d="M880 640v144c0 35.2-28.8 64-64 64H208c-35.2 0-64-28.8-64-64V240c0-35.2 28.8-64 64-64h208c17.6 0 32-14.4 32-32s-14.4-32-32-32H208c-70.4 0-128 57.6-128 128v544c0 70.4 57.6 128 128 128h608c70.4 0 128-57.6 128-128v-144c0-17.6-14.4-32-32-32s-32 14.4-32 32z" fill="#707070" p-id="3105"></path><path d="M835.2 176H624c-17.6 0-32-14.4-32-32s14.4-32 32-32h288c9.6 0 17.6 3.2 22.4 9.6 6.4 4.8 9.6 12.8 9.6 22.4v288c0 17.6-14.4 32-32 32s-32-14.4-32-32V220.8L403.2 699.2c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8L835.2 176z" fill="#707070" p-id="3106"></path></svg> -->
        </div>
    </div>
</template>
<script>
export default {
    name:"Search",
}
</script>
<style lang="scss" scoped>
.search{
    width: 100%;
    height: 50px;
    border-bottom:1px solid #ededed;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #fff;
    .sl{
        margin-right: 15px;
        line-height: 16px;
        svg{
            width: 16px;
            height: 16px;
            vertical-align: middle;
            path{
                fill: #333;
            }
        }
    }
    .sr{
        margin-left: 15px;
        line-height: 20px;
        svg{
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
    }
    .sm{
        flex-grow: 1;
        position: relative;
        height: 30px;
        line-height: 15px;
        .sear{
            width: 16px;
            height: 16px;
            position: absolute;
            left: 14px;
            top: 7px;
            path{
                fill: #888;
            }
        }
        .close{
            width: 14px;
            height: 14px;
            position: absolute;
            right: 14px;
            top: 8px;
            path{
                fill:#999;
            }
        }
        input{
            width: 100%;
            height:30px;
            border-radius: 10px;
            border: 0;
            outline: none;
            padding-left: 35px;
            box-sizing: border-box;
            background-color: rgb(244,244,244);
            &::placeholder{
                color: #888;
            }
        }
    }
}
</style>